<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Auto-render test</title>
    <link rel="stylesheet" type="text/css" href="./katex/katex.min.css">
    <link rel="stylesheet" type="text/css" href="./themes/style.css">
    <script type="text/javascript" src="./katex/katex.min.js"></script>
    <script type="text/javascript" src="./katex/contrib/auto-render.min.js"> </script>
</head>
<body>
<script>
          function rendererCallBack() {
                Bridge.rendered();
          }
          function changeLatexText(text) {
                var element = document.getElementById('math')
                element.innerHTML = text;
                renderMathInElement(document.body, {
                      delimiters: [
                          {left: "$$", right: "$$", display: true},
                          {left: "$", right: "$", display: false},
                          {left: "\\(", right: "\\)", display: false},
                          {left: "\\[", right: "\\]", display: true}
                      ]
                });
                rendererCallBack();
          }
          document.addEventListener("DOMContentLoaded", function() {
                renderMathInElement(document.body, {
                    // ...options...
                      delimiters: [
                          {left: "$$", right: "$$", display: true},
                          {left: "$", right: "$", display: false},
                          {left: "\\(", right: "\\)", display: false},
                          {left: "\\[", right: "\\]", display: true}
                      ]
                });
          });
        </script>
<script>
            str="";
            document.getElementById("#img").attr("src",str);
        </script>
<img src=''/>

<div><font size="13" color="blue">$$\pi$$,hello$$2\pi$$,$3\pi$,$4\pi$</font></div>
<img src="" id="img"/>
<div style="text-align: center;">
    <div><font size="12" color="red"><span id='math'></span></font>
    </div>

</body>
</html>